<template>
  <div class="app-container">
    <el-card class="box-card" :body-style="{ 'min-height': 'calc(100vh - 110px)',padding: '24px' }">
      <!-- query -->
      <el-form ref="rolePermissionQueryForm" :inline="true" :model="roleListQuery">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleListQuery.roleName" clearable placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色编码" prop="roleCode">
          <el-input v-model="roleListQuery.roleCode" clearable placeholder="请输入角色编码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleRoleFilter">查询</el-button>
          <el-button @click="resetForm('rolePermissionQueryForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- table data -->
      <el-table
        v-loading="roleListLoading"
        :data="roleList"
        border
        fit
        header-cell-class-name="table-header-cell"
        style="width: 100%; margin-top:20px;"
      >
        <el-table-column
          fixed
          prop="sId"
          label="序号"
          type="index"
          width="100px"
        />
        <el-table-column
          v-if="1>2"
          prop="id"
          label="角色ID"
        />
        <el-table-column
          prop="roleName"
          label="角色名称"
        />
        <el-table-column
          prop="roleCode"
          label="角色编码"
        />
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="success" size="small" @click="handleResource(row)">授权资源</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- pagination -->
      <pagination v-show="total>0" :total="total" :page.sync="roleListQuery.current" :limit.sync="roleListQuery.size" @pagination="getRoleList" />
    </el-card>

    <el-dialog
      title="菜单资源树"
      :visible.sync="dialogResourceTreeVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
      @close="closeDialogResourceTree"
    >
      <el-tree
        ref="resourceTree"
        v-loading="treeLoading"
        show-checkbox
        :data="resourceTreeData"
        node-key="id"
        :expand-on-click-node="false"
        :props="treeProps"
        style="margin-top: 20px;"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogResourceTreeVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="createResourceTreeData()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getPermissionTreeData, listForRolePermission } from '@/api/permission.js'
import { fetchRoles } from '@/api/role.js'
import { addRolePermission } from '@/api/rolePermission.js'
import { convertTreeData } from '@/utils'

export default {
  name: 'RoleResourceManagement',
  components: { Pagination },
  data() {
    return {
      roleListLoading: false,
      dialogResourceTreeVisible: false,
      treeLoading: false,
      treeProps: {
        label: 'permissionName',
        children: 'children'
      },
      total: 0,
      roleListQuery: {
        current: 1,
        size: 10,
        roleName: '',
        roleCode: ''
      },
      roleList: [],
      roleId: '',
      resource: {
        id: '',
        parentId: '',
        permissionName: '',
        permissionType: '',
        permissionExpression: '',
        permissionUrl: '',
        httpMethod: ''
      },
      resourceTreeData: []
    }
  },
  created() {
    this.getRoleList()
    this.getResourceList()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getRoleList() {
      this.roleListLoading = true
      fetchRoles(this.roleListQuery).then(response => {
        const res = response.retBody
        this.roleList = res.records
        this.total = res.total
      }).finally(() => {
        setTimeout(() => {
          this.roleListLoading = false
        }, 1 * 1000)
      })
    },
    getResourceList() {
      getPermissionTreeData().then(response => {
        const res = response.retBody
        if (res && res.length > 0) {
          const permissionTree = convertTreeData(res)
          this.resourceTreeData = [...permissionTree]
        }
      }).finally(() => {

      })
    },
    getRolePermissionList(roleId) {
      listForRolePermission(roleId).then(response => {
        const res = response.retBody
        if (res && res.length > 0) {
          const rolePermissions = res.map(function(item) {
            return item.id
          })
          this.$nextTick(() => {
            this.$refs.resourceTree.setCheckedKeys(rolePermissions)
          })
        }
      })
    },
    handleRoleFilter() {
      this.roleListQuery.current = 1
      this.getRoleList()
    },
    handleResource(row) {
      this.dialogResourceTreeVisible = true
      this.getRolePermissionList(row.id)
      this.roleId = row.id
    },
    createResourceTreeData() {
      this.dialogResourceTreeVisible = false
      const checkedKeys = this.$refs.resourceTree.getCheckedKeys(true)
      const rolePermission = {}
      rolePermission.roleId = this.roleId
      rolePermission.permissionIds = checkedKeys
      addRolePermission(rolePermission).then(() => {
        this.$notify({
          title: '成功',
          message: '新增角色资源成功',
          type: 'success',
          duration: 1500
        })
      })
    },
    closeDialogResourceTree() {
      this.$nextTick(() => {
        this.$refs.resourceTree.setCheckedKeys([])
      })
    }
  }
}
</script>
<style scoped>

</style>
